<template>
  <BasicsForm @register="formRegister" @on-schema-change="onSchemaChange" />
</template>

<script setup lang="ts">
  import BasicsForm from '@/components/Form/BasicsForm.vue';
  import { useForm, type FormSchema } from '@/components/Form';
  import { type PropType } from 'vue';
  import type { OnchangeArgument } from '@/components/Form/types';
  import type { SignUpInfoFormRef } from './types';

  const props = defineProps({
    schemas: Array as PropType<FormSchema[]>,
    values: Object as PropType<Recordable<any>>
  });

  const emits = defineEmits(['schemaChange']);

  const [register, { setFieldsValue, submit, getFieldsValue }] = useForm({
    labelAlign: 'left',
    labelPosition: 'top',
    validateTrigger: 'bind',
    labelWidth: 'auto',
    schemas: props.schemas,
  });

  function formRegister(e: any) {
    register(e);
    if (props.values) {
      setFieldsValue(props.values);
    }
  }

  function onSchemaChange(e: OnchangeArgument) {
    emits('schemaChange', e);
  }

  defineExpose<SignUpInfoFormRef>({
    submit,
    getFieldsValue,
  });
</script>

<style scoped></style>
